<template>
  <div class="m-select">
    <el-popover
      name="m-popover"
      placement="bottom"
      width="320"
      trigger="click"
      @show="isDown=false"
      @hide="isDown=true">
      <div  class="content" v-for="option in options">
        <span class="title">{{option.label}}</span>
        <div style="display: flex;flex-flow: row wrap">
          <div v-for="tag in option.tags" style="display: flex;margin-top: 12px">
            <div @click="doChoose(tag),doChange()" :class="['m-button',tags.includes(tag) && 'is-active']"><span>{{ tag }}</span></div>
          </div>
        </div>
      </div>
      <div slot="reference" class="m-input" >
        <div style="margin-left:-3px;display: flex;align-items: center;width: 93%;overflow: hidden">
          <template v-if="tags && tags.length>0">
            <el-tag
              style="margin-left: 3px"
              size="small"
              @close="tags.splice(tags.indexOf(tag),1),doChange()"
              v-for="tag in tags"
              closable>
              {{tag}}
            </el-tag>
          </template>
         <template v-else>
           <span class="placeholder">{{placeholder}}</span>
         </template>
        </div>
        <svg-icon
          :style="{transform: `rotate(${this.isDown?0:180}deg)`}"
          class="icon"
          icon-class="chevron-down"/>
      </div>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: "m-select",
  model:{
    prop:'tags',
    event:'choose'
  },
  props:{
    options:{
      type:Array,
      default:[]
    },
    tags:Array,
    placeholder:String
  },
  data(){
    return {
      isDown:true,
    }
  },
  methods:{
    doChange(){
      this.$emit('change',this.tags)
    },
    doChoose(tag){
      if(this.tags.includes(tag)){
        this.tags.splice(this.tags.indexOf(tag),1)
      }else{
        this.tags.push(tag)
      }
      this.$emit('choose',this.tags)
    },
  }
};
</script>

<style scoped>

</style>
